<template>
  <div>
    <div id="components-form-demo-advanced-search">
      <a-row :gutter="24" style="margin-bottom: 15px">
        <a-col :span="6">
          订单编号：<a-input
          :maxLength="128"
            v-model="searchData.transferNo"
            style="width: 60%"
          />
        </a-col>
        <a-col :span="6">
          客户编号：
          <a-select
            show-search
            option-filter-prop="children"
            style="width: 60%"
            :filter-option="filterOption"
            v-model="searchData.tenantId"
          >
            <a-select-option
              :value="item.tenantId"
              v-for="item in accArray"
              :key="item.id"
              :titles="item.title"
            >
              {{ item.companyName + "/" + item.tenantId }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          仓库名称：<a-select
            show-search
            option-filter-prop="children"
            style="width: 60%"
            :filter-option="filterOption"
            v-model="searchData.warehousingId"
            allowClear
          >
            <a-select-option
              :value="item.warehouseId"
              v-for="item in warehouse"
              :key="item.warehouseId"
            >
              {{ item.titleName }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          <div v-show="!expand">
            <a-button type="primary" class="searchBtn" @click="searchDate">
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </div>
          <div v-show="expand">
            接收时间：<a-range-picker
              v-model="receiveData"
              @change="onReceiveDataChange"
              style="width: 60%"
            />
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-show="expand">
        <a-col :span="6" v-if="activeKey != '1'">
          结算时间：<a-range-picker
            v-model="clearingTime"
            @change="onClearingTimeChange"
            style="width: 60%"
          />
        </a-col>
        <a-col :span="6">
          <div v-show="expand">
            <a-button type="primary" class="searchBtn" @click="searchDate">
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </div>
        </a-col>
        <a-col :span="6"> </a-col>
        <a-col :span="6"> </a-col>
      </a-row>
    </div>
    <p style="margin-top: 15px" v-if="activeKey === '2' || activeKey === '3'">
      <a-button
        @click="searchBtn('1')"
        :style="
          searchData.time === '1'
            ? 'color: #61ba8f;border-color: #61ba8f;border: 1px solid #61ba8f'
            : 'color: #626262;border-color: #fff;border: 1px solid #ccc'
        "
        style="margin: 0 5px"
        size="small"
        >昨日</a-button
      >
      <a-button
        @click="searchBtn('3')"
        :style="
          searchData.time === '3'
            ? 'color: #61ba8f;border-color: #61ba8f;border: 1px solid #61ba8f'
            : 'color: #626262;border-color: #fff;border: 1px solid #ccc'
        "
        style="margin: 0 5px"
        size="small"
        >上周</a-button
      >
      <a-button
        @click="searchBtn('2')"
        :style="searchData.time === '2'"
        style="margin: 0 5px"
        size="small"
        >上月</a-button
      >
    </p>
    <!-- 表格 -->
    <a-spin tip="Loading..." :spinning="spinning">
      <a-tabs :activeKey="activeKey" @change="callback">
        <a-tab-pane key="1">
          <span slot="tab">
            <a-badge :count="qipao" :offset="[15, 0]">入库结算</a-badge>
          </span>
          <TransferFinalTable
            v-if="activeKey === '1'"
            :getInList="getInList"
            :activeKey="activeKey"
            :searChTips="searChTips"
            :EndTime="false"
            :transferTableData="transferTableData"
          />
        </a-tab-pane>
        <a-tab-pane key="2">
          <span slot="tab">
            <a-badge :count="0" :offset="[15, 0]">入库历史结算</a-badge>
          </span>
          <TransferFinalTable
            v-if="activeKey === '2'"
            :activeKey="activeKey"
            :transferTableData="transferTableData"
          />
        </a-tab-pane>
        <a-tab-pane key="3">
          <span slot="tab">
            <a-badge :count="0" :offset="[15, 0]">出库历史结算</a-badge>
          </span>
          <TransferFinalTable
            v-if="activeKey === '3'"
            :activeKey="activeKey"
            :transferTableData="transferTableData"
          />
        </a-tab-pane>
      </a-tabs>
    </a-spin>
    <!-- 分页器 -->
    <div style="margin: 20px 0; text-align: center">
      <a-config-provider>
        <a-pagination
          :current="searchData.current"
          show-size-changer
          :pageSizeOptions="['10', '20', '30']"
          :show-total="
            (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
          "
          @showSizeChange="showChange"
          :buildOptionText="
            (props) => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
          "
          show-quick-jumper
          :default-current="searchData.current"
          :total="total"
          @change="onChangePage"
        />
      </a-config-provider>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import TransferFinalTable from "@/components/system/FinanceManagement/TransferFinalTable";

import {
  transfer_inSettlement,
  transfer_InsearchTip,
  transfer_outSettlement,
} from "@/apis/system/FinanceManagement/FinanceManagement.js";
export default {
  components: {
    TransferFinalTable,
  },
  created() {
    //转运表格
    this.getInList(0);
    this.searChTips();
  },
  data() {
    return {
      qipao: 0,
      activeKey: "1",
      spinning: false,
      searchData: {
        current: 1,
        size: 10,
        time: null,
        transferNo: null,
        tenantId: null,
        warehousingId: null,
        sendBillStartTime: null,
        sendBillEndTime: null,
        settlementStartTime: null,
        settlementEndTime: null,
      },
      expand: false,
      receiveData: null,
      clearingTime: null,
      total: 1,
      transferTable: [],
      returnTable: [],

      transferTableData: [],
    };
  },
  methods: {
    //搜索按钮
    searchDate() {
      if (this.activeKey === "1") {
        this.getInList(0);
      }
      if (this.activeKey === "2") {
        this.getInList(1);
      }
      if (this.activeKey === "3") {
        this.getBeforeOutTable();
      }
    },
    callback(key) {
      this.searchData.current = 1;
      this.activeKey = key;
      if (key === "1") {
        this.searchData.time = 0;
        this.getInList(0);
      } else if (key === "2") {
        this.searchData.time = null;
        this.getInList(1);
      } else if (key === "3") {
        this.searchData.time = null;
        this.getBeforeOutTable();
      }
    },
    //重置按钮
    resetSearch() {
      let current = this.searchData.current;
      let size = this.searchData.size;
      this.searchData = {
        current: current,
        size: size,
        time: null,
        transferNo: null,
        tenantId: null,
        warehousingId: null,
        sendBillStartTime: null,
        sendBillEndTime: null,
        settlementStartTime: null,
        settlementEndTime: null,
      };
      this.clearingTime = null;
      this.receiveData = null;
      if (this.activeKey === "1") {
        this.searchData.time = null;
        this.getInList(0);
      } else if (this.activeKey === "2") {
        this.searchData.time = null;
        this.getInList(1);
      } else if (this.activeKey === "3") {
        this.searchData.time = null;
        this.getBeforeOutTable();
      }
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber;
      if (this.activeKey === "1") {
        this.getInList(0);
      }
      if (this.activeKey === "2") {
        this.getInList(1);
      }
      if (this.activeKey === "3") {
        this.getBeforeOutTable();
      }
    },
    //页码变更
    showChange(size, current) {
      this.searchData.current = size;
      this.searchData.size = current;
      if (this.activeKey === "1") {
        this.getInList(0);
      }
      if (this.activeKey === "2") {
        this.getInList(1);
      }
      if (this.activeKey === "3") {
        this.getBeforeOutTable();
      }
    },
    //结算时间查询
    onClearingTimeChange(date, dateString) {
      this.searchData.time = null;
      this.searchData.settlementStartTime = `${dateString[0]} 00:00:00`;
      this.searchData.settlementEndTime = `${dateString[1]} 23:59:59`;
    },
    //接收时间查询
    onReceiveDataChange(date, dateString) {
      this.searchData.time = null;
      this.searchData.sendBillStartTime = `${dateString[0]} 00:00:00`;
      this.searchData.sendBillEndTime = `${dateString[1]} 23:59:59`;
    },
    //三个日期条件查询
    searchBtn(flag) {
      this.clearingTime = null;
      this.receiveData = null;
      this.searchData.sendBillStartTime = null;
      this.searchData.sendBillEndTime = null;
      this.searchData.settlementStartTime = null;
      this.searchData.settlementEndTime = null;
      this.searchData.time = flag;
      if (this.activeKey === "2") {
        this.getInList(1);
      } else {
        this.getBeforeOutTable();
      }
    },
    //入库结算列表
    async getInList(isOld) {
      this.spinning = true;
      let { code, responseBody } = await transfer_inSettlement(
        isOld,
        this.searchData
      );
      if (code === "200") {
        this.transferTableData = responseBody.records;
        this.total = responseBody.total * 1;
        this.spinning = false;
      }
    },
    //查气泡
    async searChTips() {
      let res = await transfer_InsearchTip();
      if (res.code == "200") {
        this.qipao = res.responseBody;
      }
    },

    //出库历史结算列表
    async getBeforeOutTable() {
      this.spinning = true;
      let { code, responseBody } = await transfer_outSettlement(
        this.searchData
      );
      if (code === "200") {
        this.transferTableData = responseBody.records;
        this.total = responseBody.total * 1;
        this.spinning = false;
      }
    },
  },
  computed: {
    ...mapState(["accArray"]),
    ...mapState(["warehouse"]),
  },
};
</script>

<style lang="less" scoped>
.searchBtn {
  background: #fff;
  color: #3eae7c;
  text-shadow: none;
}
.searchBtn:hover {
  background: #3eae7c;
  color: #fff;
}
</style>
